<template>
	<view class="container">
		<view class="main">
			<view class="title">{{ itemData.itemName }}</view>
			<view class="files_ts">
				申报材料：
				<image class="start" src="../../static/matter/icon_start2_on.png" mode=""></image>
				为必要材料，您必须提交才能申报，
				<image class="start" src="../../static/matter/icon_start2.png" mode=""></image>
				为容缺后补材料，您可以在网上预受理后在窗口提交， 为非必要材料，根据您实际情况选择提交。
			</view>
			<!-- <view class="files_list_box">
				<view class="files_title">
					<view>
						<image v-if="isTrue == 0" src="../../static/matter/icon_start2.png" mode=""></image>
						<image v-else-if="isTrue == 1" src="../../static/matter/icon_start2_on.png" mode=""></image>
					</view>
					江西省新型墙体材料产品认定申报表
				</view>
				<view class="files_group">
					<view class="files_btn_box"><view class="files_btn" @click="$gopage('/pages/matter/onlineFill')">在线填写</view></view>
				</view>
			</view> -->

			<view class="files_list_box" v-for="(item, index) in updataData" :key="index">
				<view class="files_title">
					<view>
						<image v-if="item.must == '否'" src="../../static/matter/icon_start2.png" mode=""></image>
						<image v-else-if="item.must == '是'" src="../../static/matter/icon_start2_on.png" mode="">
						</image>
					</view>
					{{ item.materialName }}
				</view>
				<view v-if="item.isOnline == 1" class="files_group">
					<view class="files_btn_box">
						<view class="files_btn" @click="$gopage('/pages/matter/onlineFill')">在线填写</view>
					</view>
				</view>
				<view v-else class="files_group">
					<view class="files_btn_box">
						<view class="files_btn" @click="upload(index)">{{ item.imgUrls.length != 0 ? '已上传' : '上传' }}
						</view>
						<view class="files_btn">电子证照</view>
						<view class="files_btn" :class="{ 'click-style': item.isScreen }"
							@click="clickScreenSubmit(index)">窗口提交</view>
						<view class="" @click="show = true">●●●</view>
					</view>
					<u-toast ref="uToast" />
					<view class="files_small_ts">上传大小10M以内，最多可上传9个</view>
					<view v-show="showListFn[index]">
						<view class="files_list_group" v-show="showList[index]">
							<view v-for="(item2, index2) in updataData[index].imgUrls" :key="index2"
								style="position: relative;">
								<image :src="item2" mode="aspectFill" @click.stop="$previewImg(item2)"
									v-if="/jpg$|png$/.test(item2)">
								</image>
								<image src="../../static/file.png" mode="aspectFit" v-if="!/jpg$|png$/.test(item2)"
									@click="enclosure(item2,submitContent[index].fileName[index2])"></image>
								<text>{{ submitContent[index].fileName[index2] }}</text>
								<u-icon name="close-circle-fill" size="36" @click="deleteImg(index, index2)"
									class="del"></u-icon>
							</view>
						</view>
						<view class="toggel_btn" @click="showMore(index)">
							{{ showList[index] ? '收起' : '展开' }}
							<image src="../../static/matter/icon_up.png" mode="aspectFill"
								:class="{ 'rotate': !showList[index] }"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="collect" @click="back"><text>上一步</text></view>
			<view class="sureBtn" @click="submit">提交</view>
		</view>

		<u-popup v-model="show" mode="center">
			<view class="tk_sandian">
				<view class="on">选择上传方式</view>
				<view class="">上传文件</view>
				<view class="">企业专属空间</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTrue: 1,
				// 判断是否已选择窗口提交
				// 判断是否已上传
				show: false,
				showListFn: [],
				showList: [],
				updataData: [],
				submitContent: [],
				matterData: {},
				itemData:{},
			};
		},
		onLoad() {
			this.matterData = JSON.parse(uni.getStorageSync('matterData'));
			this.getDataList();
		},
		methods: {
			enclosure(src, title) {
				uni.navigateTo({
					url: '/pages/index/webView?src=' + encodeURIComponent(src) + '&title=' + title
				})
			},
			submit() {
				let flag = this.updataData.every((item, index) => {
					if (item.must.includes('是')) {
						if (item.isScreen || item.imgUrls.length != 0) {
							return true
						} else {
							return false
						}
					} else {
						this.submitContent[index].fileUrl.push('');
						this.submitContent[index].fileName.push('');
						this.submitContent[index].fileType.push(this.updataData[index].materialCode);
						this.submitContent[index].fileFlag.push('0')
						return true
					}
				})
				if (!flag) {
					uni.showToast({
						title: '请补充完材料',
						icon: 'none'
					})
					return false
				}
				this.matterData.applyFileList = this.submitContent;
				this.insertSxBusinessFlow();
			},
			insertSxBusinessFlow() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				this.$ajax({
					url: '/api/insertSxBusinessFlow',
					needAuth: true,
					contentType: 'application/json;charset=utf-8',
					data: JSON.stringify(this.matterData),
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/mineBanJian/mineBanJian'
							});
						}, 1000)

					}
				})
			},
			back() {
				uni.navigateBack()
			},
			// 是否选择窗口提交
			clickScreenSubmit(index) {
				if (this.updataData[index].imgUrls.length != 0) {
					uni.showToast({
						title: '已上传图片，无法选择窗口提交',
						icon: 'none'
					})
				} else {
					if (this.updataData[index].isScreen) {
						this.submitContent[index].fileUrl = [];
						this.submitContent[index].fileName = [];
						this.submitContent[index].fileType = [];
						this.submitContent[index].fileFlag = [];
						this.$set(this.updataData[index], 'isScreen', false)
					} else {
						this.submitContent[index].fileUrl.push('');
						this.submitContent[index].fileName.push('');
						this.submitContent[index].fileType.push(this.updataData[index].materialCode);
						this.submitContent[index].fileFlag.push('1')
						this.$set(this.updataData[index], 'isScreen', true)
					}
				}
			},
			showMore(e) {
				var txt = !this.showList[e];
				this.showList.splice(e, 1, txt);
			},
			// 获取初始数据
			getDataList() {
				this.$ajax({
					url: '/api/wwwBiz/selectItemDetail',
					method: 'post',
					needAuth: true,
					data: {
						itemCode: this.matterData.itemCode,
						userType: uni.getStorageSync('userType')
					}
				}).then(res => {
					if (res.code == 200) {
						this.itemData = res.data.data1;
						res.data.data3.forEach((item, index) => {
							res.data.data3[index].isScreen = false;
							res.data.data3[index].imgUrls = [];
							this.submitContent[index] = {
								fileUrl: [],
								fileName: [],
								fileType: [],
								fileFlag: []
							}
							this.showListFn.push(false);
							this.showList.push(false);
						});
						this.updataData = res.data.data3;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 删除图片
			deleteImg(index, index2) {
				uni.showModal({
					title: '删除文件',
					content: '确定删除文件?',
					success: res => {
						if (res.confirm) {
							this.updataData[index].imgUrls.splice(index2, 1);
							this.submitContent[index].fileUrl.splice(index2, 1);
							this.submitContent[index].fileName.splice(index2, 1);
							this.submitContent[index].fileType.splice(index2, 1);
							this.submitContent[index].fileFlag.splice(index2, 1);
							// 响应式
							this.$set(this.showList, index, false);
							this.$set(this.showList, index, true);
							// 如果没有图片，不显示展示、收起样式
							if (this.updataData[index].imgUrls.length == 0) {
								this.isUpload = false;
								this.$set(this.showListFn, index, false);
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 上传图片
			upload(indexContent) {



				if (this.updataData[indexContent].isScreen == false) {

					if (9 - this.updataData[indexContent].imgUrls.length <= 0) {
						uni.showToast({
							title: '最多上传9张',
							icon: 'none'
						})
						return false
					}

					uni.chooseFile({
						// 设置不超过9张图片
						count: 9 - this.updataData[indexContent].imgUrls.length,
						success: res => {
							let tempFiles = res.tempFiles;

							res.tempFilePaths.forEach((item, index) => {

								if (parseInt(tempFiles[index].size / 1024) > 10240) {
									uni.showToast({
										title: '大小限制10M',
										icon: 'none'
									})
									return false
								}

								uni.uploadFile({
									url: this.$basePath + '/api/fileUpLoad?dir=itemfile',
									filePath: item,
									success: uploadFileRes => {
										console.log('uploadFileRes', uploadFileRes)
										if (JSON.parse(uploadFileRes.data).code == 200) {
											// 添加图片
											this.updataData[indexContent].imgUrls.push(JSON
												.parse(uploadFileRes.data).data);
											this.updataData[indexContent].isUpload = true;
											// 提示已上传
											// 展示图片
											this.$set(this.showListFn, indexContent, true);
											this.$set(this.showList, indexContent, true);
											// 根据返回结果获取提交参数
											this.submitContent[indexContent].fileUrl.push(
												JSON.parse(uploadFileRes.data).data);
											this.submitContent[indexContent].fileName.push(
												tempFiles[index].name);
											this.submitContent[indexContent].fileType.push(
												this.updataData[indexContent]
												.materialCode);
											this.submitContent[indexContent].fileFlag.push(
												'2')
										} else {
											uni.showToast({
												title: JSON.parse(uploadFileRes
													.data).msg,
												icon: 'none'
											});
										}
									}
								});
							});
						}
					});
				} else {
					uni.showToast({
						title: '已选择窗口提交，无法上传图片',
						icon: 'none'
					})
				}
			}
		}
	};
</script>

<style scoped lang="less">
	.container {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.main {
		padding: 88rpx 30rpx 30rpx;
		flex: 1;
		overflow-y: auto;
	}

	.footer {
		height: 98rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;

		.collect {
			width: 240rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #5b96ff;
			border-top: 1rpx solid #5b96ff;
			height: 100%;
		}

		.sureBtn {
			flex: 1;
			height: 100%;
			background-color: #5b96ff;
			border-top: 1rpx solid #5b96ff;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.title {
		padding-left: 20rpx;
		margin-top: 40rpx;
		font-size: 44rpx;
		color: #333;
		font-weight: bolder;
	}

	.files_ts {
		margin-top: 30rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #999;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.flex_1 {
		flex: 1;
	}

	.start {
		width: 22rpx;
		height: 21rpx;
	}

	.files_list_box {
		margin-top: 30rpx;

		.files_title {
			font-size: 28rpx;
			color: #333;
			display: flex;
			align-items: center;

			view {
				width: 22rpx;
				height: 21rpx;
				margin-right: 10rpx;
				display: flex;
				align-items: center;

				image {
					width: 22rpx;
					height: 21rpx;
				}
			}
		}

		.files_group {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f1f1f1;

			.files_btn_box {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				&>view {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					color: #5b96ff;
					height: 62rpx;

					&.files_btn {
						border: 1rpx solid #5b96ff;
						padding: 0 30rpx;
					}

					&.click-style {
						color: white;
						background-color: rgba(91, 150, 255, 0.6);
					}
				}
			}

			.files_list_group {
				// padding: 0 50rpx;
				// margin-top: 30rpx;
				// display: flex;
				// flex-wrap: wrap;
				// justify-content: center;
				// width: 485rpx;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;

				&>view {
					margin-right: 40rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;
					width: 135rpx;

					&:nth-child(4n) {
						margin-right: 0;
					}

					image {
						width: 100%;
						height: 180rpx;
					}

					text {
						font-size: 22rpx;
						color: #333;
						width: 100%;
						display: inline-block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.del {
						background: #FFFFFF;
						border-radius: 50%;
						display: block;
						position: absolute;
						right: -14rpx;
						top: -16rpx;
					}
				}
			}

			.toggel_btn {
				font-size: 32rpx;
				color: #5b96ff;
				margin-top: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 26rpx;
					height: 8rpx;
					margin-left: 20rpx;
				}

				.rotate {
					transform: rotate(180deg);
				}
			}
		}

		.files_small_ts {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 30rpx;
		}
	}

	.tk_sandian {
		width: 540rpx;
		height: 300rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		&>view {
			height: 97rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			border-bottom: 1px solid #f1f1f1;

			&:last-child {
				border-bottom: 0;
			}

			&.on {
				font-size: 32rpx;
				font-weight: bolder;
			}
		}
	}
</style>
